<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">修改count</button>

    <p>{{ person }}</p>
    <button @click="changePerson">修改person</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import {
  ref,
  watch,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
//所有的生命周期方法(6个)全部都是函数呈现,并且可以多次使用
onBeforeMount(() => {
  console.log("onBeforeMount");
});

onMounted(() => {
  console.log("onMounted1");
});
onMounted(() => {
  console.log("onMounted2");
});
onMounted(() => {
  console.log("onMounted3");
});
onMounted(() => {
  console.log("onMounted4");
});

onBeforeUpdate(() => {});

onUpdated(() => {});

onBeforeUnmount(() => {});

onUnmounted(() => {});
</script>

<style></style>
